<template>
  <div>
		<title-bar :title="'门店统计'" />
    <van-tabs sticky :active="activeIndex" @click="handleTabClick" style="margin-top: 46px;">
      <van-tab v-for="(tabItem, i) in tabItems" :key="i" :title="tabItem.title">
        <div class="header_text">
          <span class="price_text"><span>{{priceTotal.toFixed(2)}}</span></span>
          <span class="num_text"><span>{{numTotal}}</span></span>
        </div>
        <van-cell-group style="padding: 10px;">
          <div class="btn_group">
            <div>
              <van-button round plain type="danger" size="small" :disabled="statisticType===0" :style="btnStyle" @click="onTypeClick(0)">按商品
                <van-icon v-if="statisticType===0" name="success" />
              </van-button>
            </div>
            <div>
              <van-button round plain type="danger" size="small" :disabled="statisticType===1" :style="btnStyle" @click="onTypeClick(1)">按用户
                <van-icon v-if="statisticType===1" name="success" />
              </van-button>
            </div>
            <div v-if="tabItem.status === 4">
              <van-button round plain type="danger" size="small" :style="btnStyle" @click="showPickDate=true">{{dateRange}}</van-button>
            </div>
          </div>
        </van-cell-group>
        <van-list v-model="loading" class="scroll-load" :finished="finished" :immediate-check="false" :offset="100"
          @load="loadMore">
          <div v-if="statisticType === 0">
            <van-cell-group v-for="(item, i) in items" :key="i" style="margin-bottom: 10px;">
              <van-cell>
                <div slot="title"><b>{{item.shortTitle}}</b></div>
                <div slot="right-icon">总计：<b class="total_text">{{item.total}}</b></div>
              </van-cell>
              <van-cell v-for="(detail, j) in item.detail" :key="j" :value="'× ' + detail.total">
                <div slot="title" class="detail_title">{{detail.nickname}}</div>
              </van-cell>
            </van-cell-group>
          </div>
          <div v-else>
            <van-cell-group v-for="(item, i) in items" :key="i" style="margin-bottom: 10px;">
              <van-cell>
                <div slot="title"><b>{{item.nickname}}</b></div>
                <div slot="right-icon">总计：<b class="total_text">{{item.total}}</b></div>
              </van-cell>
              <van-cell v-for="(detail, j) in item.detail" :key="j" :value="'× ' + detail.total">
                <div slot="title" class="detail_title">{{detail.shortTitle}}</div>
              </van-cell>
            </van-cell-group>
          </div>
        </van-list>

        <is-empty v-if="isEmpty">没有找到符合条件的记录</is-empty>
      </van-tab>
    </van-tabs>
    <pick-date :show="showPickDate" @picked="onDatePicked" @cancel="onDateCancel" />
  </div>
</template>
<script>
import {
  Tabs,
  Tab,
} from 'vant';
import IsEmpty from "@/vue/components/is-empty/";
import loadMore from "@/vue/mixin/list-load-more";
import { COMMANDER_STATISTIC } from "@/api/user";
import moment from 'moment';
import PickDate from '@/vue/components/pick-date-range/';
import TitleBar from '@/vue/components/title-bar/';

export default {
  mixins: [loadMore],

  data() {
    const today = new Date();

    return {
      tabItems: [{
        title: '今日销量',
        status: 0
      }, {
        title: '昨日销量',
        status: 3
      }, {
        title: '按时间',
        status: 4
      }],
      shopId: this.getUser().id,
      activeIndex: 0,
      statisticType: 0,
      priceTotal: 0,
      numTotal: 0,
      btnStyle: {
          'background-color': 'white'
      },
      startDate: today,
      endDate: today,
      showPickDate: false
    }
  },
  computed: {
      dateRange() {
          return moment(this.startDate).format("YYYY.MM.DD") + ' - ' + moment(this.endDate).format("YYYY.MM.DD");
      },
  },
  created() {
    this.resetInit();
  },
  methods: {
    initData() {
      const timeType = this.tabItems[this.activeIndex].status;
      return this.$reqGet(
        COMMANDER_STATISTIC, {
          mid: this.shopId,
          centreId: this.user.centreId,
          timeType: timeType,
          type: this.statisticType,
          start: moment(this.startDate).format("YYYY-MM-DD"),
          end: moment(this.endDate).format("YYYY-MM-DD"),
          offset: (this.pages.currPage - 1) * this.pages.perPage,
          limit: this.pages.perPage
        }, {
          hideLoading: true
        }
      ).then(res => {
        const {
          countList,
          salesTotal
        } = res.data.data;
        this.items.push(...countList.rows);
        this.priceTotal = salesTotal.totalPrice || 0;
        this.numTotal = salesTotal.total || 0;
        return {
          pageCount: countList.rows.length,
          totalCount: countList.total
        };
      });
    },
    handleTabClick(index) {
        this.activeIndex = index;
        this.resetInit();
    },
    onTypeClick(type) {
        this.statisticType = type;
        this.resetInit();
    },
    onDatePicked(start, end) {
        this.startDate = start;
        this.endDate = end;
        this.showPickDate = false;
        this.resetInit();
    },
    onDateCancel() {
        this.showPickDate = false;
    }
  },
  components: {
      [Tabs.name]: Tabs,
      [Tab.name]: Tab,
      [IsEmpty.name]: IsEmpty,
      [PickDate.name]: PickDate,
			[TitleBar.name]: TitleBar
  }  
}
</script>
<style lang="scss" scoped>
.header_text {
    font-size: 30px;
    color: white;
    padding: 10px;
    text-align: center;
    background-color: $green;
}

.price_text {
    ::before {
        content: '¥';
        font-size: 10px;
        margin-right: 5px;
    } 
}

.num_text {
    margin-left: 30px;
    ::after {
        content: '份';
        font-size: 10px;
    }
}

.detail_title {
  color: gray;
  margin-left: 5px;
}

.total_text {
  color: $red;
  font-size: 18px;
}

.btn_group {
  display: table;
  width: 100%;
  button {
    width: 98%;
  }
  div {
    display: table-cell;
    text-align: center;
    i {
      font-size: 6px;
    }
  }
}
</style>
